<template>
  <j-modal v-if="!dataId"
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" v-if="!disableSubmit && (nextCurrent===currentTab) && !over" :loading="confirmLoading" @click="handleOk">确定</a-button>
    </template>
    <template>
      <a-spin :spinning="confirmLoading">
        <a-row >
          <a-col :span="24" v-show="selectTypeList.length>1 ">
            <a-form-model-item label="跟进流程" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="processId">
              <j-select-process v-model="model.processId" @change="handleChange" title="跟进流程" :parentDisabled="true" :org-code="sysOrgCode" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24"><!--:disabled="node.number>nextCurrent"-->
            <a-steps class="steps" v-model:current="currentTab" @change="stepsChange"  style="margin-bottom: 50px;padding: 0 130px;">
              <a-step  v-for="(node, key) in stepsDataList" :disabled="switch_?false:(node.currentNode-1>nextCurrent)" :class="switch_?false:(node.currentNode-1>nextCurrent)?'disable-class':''" :key="key" :title="node.name" :description="node.remark"/>
            </a-steps>
          </a-col>
        </a-row>
        <j-form-container v-for="(node, key) in stepsDataList"  v-show="currentTab === key" :disabled="disableSubmit || over">
          <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
            <a-row>
              <!--1：文本 2：多行文本 3：下拉框 4：单图 5：多图 6：文件 7:单选 8：多选 9：数字文本-->
              <a-col :span="24/node.columnNum" v-for="(item, index) in node.nodeItemList" :key="index"  v-show="item.notHide==='0'">
                <a-form-model-item :label="item.tableName" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="item.id">
                  <a-input @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-if="item.tableType==='input' && item.maxLength<=0 " v-model="model[item.id]" :placeholder="'请输入'+item.tableName"  ></a-input>
                  <a-input @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-if="item.tableType==='input' && item.maxLength>0"  :maxLength="item.maxLength"  v-model="model[item.id]" :placeholder="'请输入'+item.tableName"  ></a-input>

                  <a-input-number @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-if="item.tableType==='input-number' && item.maxLength===-1" v-model="model[item.id]" :placeholder="'请输入'+item.tableName" style="width: 100%" />
                  <a-input-number @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-else-if="item.tableType==='input-number' && item.maxLength!==-1" :max="item.maxLength" v-model="model[item.id]" :placeholder="'请输入'+item.tableName" style="width: 100%" />

                  <a-textarea @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-if="item.tableType==='text' && item.maxLength<=0" v-model="model[item.id]" rows="4" :placeholder="'请输入'+item.tableName" />
                  <a-textarea @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :disabled="item.readOnly==='1'" v-if="item.tableType==='text' && item.maxLength>0" :maxLength="item.maxLength" v-model="model[item.id]" rows="4" :placeholder="'请输入'+item.tableName" />

                  <j-image-upload v-if="item.tableType==='image' && item.maxLength===1 && !disableSubmit && !over" v-model="model[item.id]" ></j-image-upload>
                  <j-image-upload v-if="item.tableType==='image' && item.maxLength<=0 && !disableSubmit && !over" v-model="model[item.id]" :is-multiple="true" ></j-image-upload>
                  <j-image-upload v-if="item.tableType==='image' && item.maxLength>1 && !disableSubmit && !over" :number="item.maxLength" v-model="model[item.id]" :is-multiple="true"  ></j-image-upload>

                  <j-upload v-if="item.tableType==='file' && item.maxLength<=0 && !disableSubmit && !over" v-model="model[item.id]" ></j-upload>
                  <j-upload v-if="item.tableType==='file' && item.maxLength>0 && !disableSubmit && !over" :number="item.maxLength" v-model="model[item.id]" ></j-upload>

                  <j-file-info  v-if="(item.tableType==='image' || item.tableType==='file') && (disableSubmit || over)" v-model="model[item.id]" ></j-file-info>

                  <j-dict-select-tag @change="changeSelect(node,item)" v-if="item.tableType==='select'  && item.dataType==='1'" v-model="model[item.id]" :placeholder="'请选择'+item.tableName" :dict-code="item.dataCode" />
                  <j-sys-data-api @change="changeSelect(node,item)" v-if="item.tableType==='select'  && item.dataType==='2'" v-model="model[item.id]" :placeholder="'请选择'+item.tableName" :dict-code="item.dataCode" :main-id="item.id_" :init-id="main[JSON.parse(item.changeConfig).initKey]" />
                  <j-dict-select-tag type="radio" v-if="item.tableType==='radio'" v-model="model[item.id]" :dict-code="item.dataCode"></j-dict-select-tag>
                  <j-multi-select-tag type="checkbox" v-if="item.tableType==='checkbox'" v-model="model[item.id]" :dict-code="item.dataCode"></j-multi-select-tag>

                  <j-date @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :readOnly="item.readOnly==='1'" v-if="item.tableType==='date'" v-model="model[item.id]" date-format="YYYY-MM-DD" :placeholder="'请选择'+item.tableName"  style="width: 100%" />
                  <j-date @change="jsEnhance(node,item,'1')"  @blur="jsEnhance(node,item,'2')" :readOnly="item.readOnly==='1'" v-if="item.tableType==='date-time'" v-model="model[item.id]" date-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择'+item.tableName"  style="width: 100%" />

                </a-form-model-item>
              </a-col>
              <a-col :span="24/node.columnNum" v-if="model[node.id+'_createBy']">
                <a-form-model-item :label="'操作人'" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                  <a-input  v-model="model[node.id+'_createBy']" :placeholder="'请选择'+node.name+'操作人'"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24/node.columnNum" v-if="model[node.id+'_createTime']">
                <a-form-model-item :label="'操作时间'" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                  <j-date  v-model="model[node.id+'_createTime']" date-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择'+node.name+'操作时间'"  style="width: 100%" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </j-form-container>
      </a-spin>
    </template>
  </j-modal>
  <div v-else class="steps-list">
    <a-row >
      <a-col :span="24"><!--:disabled="node.number>nextCurrent"-->
        <a-steps class="steps" v-model:current="currentTab" @change="stepsChange"  style="margin-bottom: 50px;padding: 0 130px;">
          <a-step  v-for="(node, key) in stepsDataList" :disabled="switch_?false:(node.currentNode-1>nextCurrent)" :class="switch_?false:(node.currentNode-1>nextCurrent)?'disable-class':''"  :key="key" :title="node.name" :description="node.remark"/>
        </a-steps>
      </a-col>
    </a-row>
    <j-form-container v-for="(node, key) in stepsDataList"  v-show="currentTab === key" :disabled="disableSubmit">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <!--1：文本 2：多行文本 3：下拉框 4：单图 5：多图 6：文件 7:单选 8：多选 9：数字文本-->
          <a-col :span="24/node.columnNum" v-for="(item, index) in node.nodeItemList" :key="index"  v-show="item.notHide==='0'">
            <a-form-model-item :label="item.tableName" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="item.id">
              <a-input v-if="item.tableType==='input'" v-model="model[item.id]" :placeholder="'请输入'+item.tableName"  ></a-input>
              <a-input-number v-else-if="item.tableType==='input-number'" v-model="model[item.id]" :placeholder="'请输入'+item.tableName" style="width: 100%" />
              <a-textarea v-else-if="item.tableType==='text'" v-model="model[item.id]" rows="4" :placeholder="'请输入'+item.tableName" />
              <j-dict-select-tag @change="changeSelect(node,item)" v-else-if="item.tableType==='select' && item.dataType==='1'" v-model="model[item.id]" :placeholder="'请选择'+item.tableName" :dict-code="item.dataCode" />
              <j-sys-data-api @change="changeSelect(node,item)" v-else-if="item.tableType==='select' && item.dataType==='2'" v-model="model[item.id]" :placeholder="'请选择'+item.tableName" :dict-code="item.dataCode" :main-id="item.id_" :init-id="main[JSON.parse(item.changeConfig).initKey]"/>
              <j-file-info :height="80" v-else-if="item.tableType==='image' || item.tableType==='file'" v-model="model[item.id]" ></j-file-info>
              <j-dict-select-tag type="radio" v-else-if="item.tableType==='radio'" v-model="model[item.id]" :dict-code="item.dataCode"></j-dict-select-tag>
              <j-multi-select-tag type="checkbox" v-else-if="item.tableType==='checkbox'" v-model="model[item.id]" :dict-code="item.dataCode"></j-multi-select-tag>
              <j-date v-else-if="item.tableType==='date'" v-model="model[item.id]" date-format="YYYY-MM-DD" :placeholder="'请选择'+item.tableName"  style="width: 100%" />
              <j-date v-else-if="item.tableType==='date-time'" v-model="model[item.id]" date-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择'+item.tableName"  style="width: 100%" />

            </a-form-model-item>
          </a-col><!--v-if="(disableSubmit || over) && node.currentNode-1<=nextCurrent"-->
          <a-col :span="24/node.columnNum" v-if="model[node.id+'_createBy']" >
            <a-form-model-item :label="'操作人'" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-input  v-model="model[node.id+'_createBy']" :placeholder="'请选择'+node.name+'操作人'"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24/node.columnNum" v-if="model[node.id+'_createTime']" >
            <a-form-model-item :label="'操作时间'" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <j-date  v-model="model[node.id+'_createTime']" date-format="YYYY-MM-DD HH:mm:ss" :placeholder="'请选择'+node.name+'操作时间'"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </div>
</template>


<script>

  import {getFileAccessHttpUrl, httpAction, getAction  } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'JFollowNode',
    components: {
    },
    props: {
      dataId: {
        type: String,
        required: false,
        default: '',
      },
      dataType: {
        type: String,
        required: false,
        default: '',
      },
      sysOrgId: {
        type: String,
        required: false,
        default: '',
      },
      sysOrgCode: {
        type: String,
        required: false,
        default: '',
      },
      //节点未完成是否允许切换
      switch: {
        type: Boolean,
        required: false,
        default: false,
      },
      //显示类型
      showType: {
        type: String,
        required: false,
        default: '1',// 1跟进 2详情
      },
      //操作人 查看权限
      auth: {
        type: String,
        required: false,
        default: '',
      },
    },
    /*监听图片值*/
    watch:{
      dataId:{
        immediate: true,
        handler(n) {
          console.log(n)
          if(n){
            this.visible=true;
            this.drawing({id:n});
          }
        }
      },
      sysOrgCode:{
        immediate: true,
        handler(n) {
          //console.log(n)
          if(n){
            this.typeList(this.mainId)
          }
        }
      },
    },
    data () {
      return {
        title:'',
        over:false,//跟进节点走完
        width:1200,
        mainId:'',
        nodeId:'',
        switch_:'',
        currentTab: 0,
        nextCurrent:0,//当前跟进节点
        visible: false,
        termination:false,//终止
        disableSubmit: false,
        model:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        url:{
          apiData:'/yw/api/data/',
          steps:'/reportProcess/steps',//根据
          typeList:'/reportProcess/typeList',
          data:'/reportProcessData/data',//根据主数据id查询跟进流程数据
          add:'/reportProcessData/addList',//根据主数据id查询跟进流程数据
          edit:'/reportProcessData/edit',//根据主数据id查询跟进流程数据
        },
        selectTypeList:[],
        stepsDataList:[],
        tableTitle:{
          'input':'请输入',
          'text':'请输入',
          'input-number':'请输入',
          'image':'请上传',
          'file':'请上传',
          'select':'请选择',
          'radio':'请选择',
          'checkbox':'请选择',
          'date':'请选择',
          'date-time':'请选择',
        },
        main:{},
        jsZq:{
          "1":"change",
          "2":"blur",
          "3":"init",
        }

      }
    },

    created() {

    },
    mounted(){
      this.switch_ = this.switch;
      //console.log(this.switch)
    },
    methods: {
      //下拉列表改变事件
      changeSelect(node,item){
        let config = JSON.parse(item.changeConfig);
        node.nodeItemList.forEach(v => {
          if(v.number===config.data){//改变下级主表id
            v.id_ = this.model[item.id]
          }
          if(v.number===config.value){//给数据赋值
            this.model[v.id] = this.model[item.id]
          }
        })
        //得改变下stepsDataList 触发改变的事件 不然 v.id_ 不触发改变事件
        this.$set(this.stepsDataList, 'change', true);
      },

      //js增强事件
      jsEnhance(node,item,type){
        let type_ = this.jsZq[type];
        let strong = item.jsStrong;
        if(strong && strong !=='' && strong.indexOf(type_)>=0){
          eval(item.jsStrong);
          if(this[type_]!=null){//有改变事件配置项
              this[type_](item);
          }
        }
      },

      //步骤条切换
      stepsChange(v){
        let node = this.stepsDataList[v];
        this.validatorRules = {};
        node.nodeItemList.forEach(item =>{
          if(item.required==='1') {
           let required = [];
            required.push({required: true, message: this.tableTitle[item.tableType]+item.tableName+"！"})
            this.validatorRules[item.id] = required;
          }
          this.jsEnhance(node,item,'3');//初始化的js
        })
        this.disableSubmit = this.nextCurrent!==this.currentTab
      },

      drawing(record){
        //终止
        if(record.followStatus==='2' || record.end==='2' || this.showType==='2'){
          this.termination=true;
        }
        //console.log(record.followStatus,record.end,this.showType)
        this.$set(this,'selectTypeList',[]);
        this.$set(this,'stepsDataList',[]);
        this.mainId = record.id;
        this.typeList(record.id);//查询节点配置
      },
      stepsList(id,mainId){
        getAction(this.url.steps,{id:id,mainId:mainId}).then((res)=>{
          if(res.success){
            //console.log(res.result)
            // if(this.termination){//终止的不允许切换了
            //   this.switch_ = false;
            // }
            //console.log(res.result.currentTab,res.result.over);
            this.currentTab = this.termination?res.result.currentTab-1:res.result.currentTab;//最大
            if(this.showType==='2'){
              this.currentTab = res.result.over?res.result.currentTab:res.result.currentTab-1;//最大
            }
            this.over = this.termination?this.termination:res.result.over;
            this.nextCurrent = res.result.currentTab;
            this.main = res.result.main;
            this.$set(this,'stepsDataList',res.result.nodeList)
            //this.stepsChange(this.currentTab)//处理必填标识
            this.tableData(id);//加载表单数据
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      tableData(id){
        getAction(this.url.data,{mainId:this.mainId}).then((res)=>{
          if(res.success){
             console.log(res.result.data);
            res.result.data.processId = id;
            this.model = Object.assign({}, res.result.data);
            this.stepsChange(this.currentTab)//处理必填标识
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      //获取流程类型下的流程配置
      typeList(mainId){
        getAction(this.url.typeList,{dataType:this.dataType,mainId:mainId,sysOrgId:this.sysOrgId,sysOrgCode:this.sysOrgCode}).then((res)=>{
          if(res.success){//判断了mainId  直接返回一个
            console.log(res.result)
            this.$set(this,'selectTypeList',res.result)
            if(res.result.length<=1 && res.result[0]){
              this.stepsList(res.result[0].value,mainId);
            }
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      handleChange(n){
        this.stepsList(n,'');
      },
      close () {
        this.visible = false;
        this.model= {};
        this.mainId='';
        this.nodeId='';
        this.currentTab= 0;
        this.nextCurrent=0;//当前跟进节点
        this.termination=false;//终止
        this.disableSubmit= false;
        this.$emit('close');
      },
      handleOk () {
        const that = this;
        let node =  this.stepsDataList[this.currentTab];//节点数据
        let nodeItemList = node.nodeItemList;//节点表单配置数据
        // 触发手动表单验证
        for (let i =0 ;i<nodeItemList.length ; i++){
          let item = nodeItemList[i];
          if(item.required==='1' && !this.model[item.id]){
            this.$message.warning(this.tableTitle[item.tableType]+item.tableName+"！");
            return false;
          }
        }
        this.$set(this.model,'mainId',this.mainId);
        this.$set(this.model,'nodeId',node.id);
        this.$set(this.model,'dataType',this.dataType);
        let dataList = [];
        for (let i =0 ;i<nodeItemList.length ; i++){
          let item = nodeItemList[i];
          dataList.push(
            {
              sysOrgId:node.sysOrgId,
              processId:node.processId,
              mainId:this.model.mainId,
              nodeId:this.model.nodeId,
              itemId:item.id,
              codeKey:item.codeKey,
              value:this.model[item.id],
              mainNode:node.currentNode,
              nextNode:node.nextNode,
            }
          )
        }

        that.confirmLoading = true;
        let httpurl = '';
        let method = '';
        if(!this.model.id){
          httpurl+=this.url.add;
          method = 'post';
        }else{
          httpurl+=this.url.edit;
          method = 'put';
        }

        //console.log(dataList);
        this.$set(this.model,'listData',dataList);
        httpAction(httpurl,this.model,method).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            this.submitCallback();
            this.handleCancel();
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })

      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    },
  }
</script>

<style scoped>
    .disable-class{
      cursor: not-allowed;
    }
  .jeecg-form-container-disabled fieldset[disabled] .steps-list{
    -ms-pointer-events: auto !important;
    pointer-events: auto !important;
  }
</style>
